xinkeaboard/xinkeaboard-web/pages/goods/detail/[id].vue

// 商品详情页面
<template>
  <div>
    <StoreHeaderCat ref="headercat" @updateFllow="updateFllow" />
    <div class="sld_goods_detail" v-loading="firstLoading">
      <!-- 内容区顶部固定 start -->
      <div class="contain_con" v-if="containCon">
        <div class="contain_content flex_row_center_center">
          <div class="contain_con_left flex_row_start_center">
            <span
              class="store_type"
              v-if="goodsDetail.data.storeInf.isOwnStore == 1"
              >{{ L["自营"] }}</span
            >
            <span class="store_title">{{
              goodsDetail.data.storeInf.storeName
            }}</span>
          </div>
          <div class="contain_con_right">
            <div class="goods_description_title flex_row_between_center">
              <div class="description_title_left flex_row_start_center">
                <span
                  class="cursor_pointer"
                  :class="{ description_active: goodsDesctionType == 'detail' }"
                  @click="goodsDescType('detail')"
                  >{{ L["商品详情"] }}</span
                >
                <span
                  class="cursor_pointer"
                  :class="{
                    description_active: goodsDesctionType == 'evaluate',
                  }"
                  @click="goodsDescType('evaluate')"
                  >{{ L["商品说明"] }}</span
                >
                <span
                  class="cursor_pointer"
                  :class="{
                    description_active: goodsDesctionType == 'service',
                  }"
                  @click="goodsDescType('service')"
                  >{{ L["商品服务"] }}</span
                >
                <span
                  class="cursor_pointer"
                  :class="{
                    description_active: goodsDesctionType == 'salestore',
                  }"
                  @click="goodsDescType('salestore')"
                  >{{ L["店铺热销"] }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容区顶部固定 end -->
      <div class="goods_detail_content self_background" v-if="!firstLoading && goodsDetail.data.state === 3">
        <!-- 商品所属分类 ，联系客服，关注店铺 start-->
        <div class="goods_about_con">
          <div class="goods_about flex_row_between_center">
            <div class="goods_classify">
              <span
                v-for="(item, index) in goodsDetail.data.categoryPath"
                :key="index"
              >
                <nuxt-link
                  :to="`/goods/list/${calcProductName(item)}_v-${ goodsDetail.data.categoryIdPath[index] }_gid-${index + 1}${index > 0? '_pid-' + goodsDetail.data.categoryIdPath[index - 1]: '_pid-0'
                  }`"
                  target="_blank"
                >
                  {{ item }}</nuxt-link
                >
                <i> > </i>
              </span>
              <span style="font-weight: bold;font-size: 12px;color: #036EB8;">{{
                goodsDetail.data.goodsName
              }}</span>
            </div>
            <div class="goods_about_right flex_row_between_center">
              <router-link
                target="_blank"
                :to="'/store/'+ calcProductName(goodsDetail.data.storeInf.storeName) +'_'+ goodsDetail.data.storeInf.storeId"
                class="goods_about_store flex_row_between_center"
                v-if="goodsDetail.data.storeInf"
              >
                <span>{{ goodsDetail.data.storeInf.storeName }}</span>
                <span
                  v-if="
                    goodsDetail.data.storeInf &&
                    goodsDetail.data.storeInf.isOwnStore == '1'
                  "
                  >{{ L["自营"] }}</span
                >
              </router-link>

              <div
                class="contact_service focus_store"
                @click="focusStore"
                v-if="goodsDetail.data.storeInf"
              >
                <span>
                  {{
                    goodsDetail.data.storeInf.isFollowStore
                      ? L["取消关注"]
                      : L["关注店铺"]
                  }}
                </span>
                <img
                  src="/goods/collection.png"
                  alt=""
                  v-show="goodsDetail.data.storeInf.isFollowStore == true"
                />
                <img
                  src="/goods/no_collection.png"
                  alt=""
                  v-show="goodsDetail.data.storeInf.isFollowStore == false"
                />
                
              </div>
            </div>
          </div>
        </div>
        <!-- 商品所属分类 ，联系客服，关注店铺 end-->
        <!-- 商品主要信息 start -->
        <div class="main_con">
          <!-- 商品相关 start -->
          <div class="goods_des">
            <!-- 商品图片列表 start -->
            <div class="goods_des_left">
              <!-- 商品放大镜效果 start-->
              <div class="goods_main_picture">
                <div class="mask" v-if="goodsDetail.data.state && goodsDetail.data.state !== 3">
                   <div class="circle">{{  L['已下架']  }}</div>
                  </div>
                <div
                  class="preview-box"
                  @mousemove="move($event)"
                  @mouseleave="out($event)"
                  @mouseenter="enter($event)"
                  ref="previewBox"
                >
                  <div
                    class="imageBorder"
                    :class="{
                      default_image: true,
                      skeleton_default_image: firstLoading,
                    }"
                    :style="{ backgroundImage: 'url(' + defaultImage + ')' }"
                  >
                    <video
                      v-if="
                        currentDefaultImage == -1 && goodsDetail.data.goodsVideo
                      "
                      controls
                      playsinline="playsinline"
                      class="imageBorder default_image"
                      :poster="defaultImage"
                      autoplay
                      ref="video"
                    >
                      <source
                        :src="goodsDetail.data.goodsVideo"
                        type="video/mp4"
                      />
                    </video>
                  </div>
                  <div
                    class="v_btn"
                    v-if="
                      currentDefaultImage != -1 && goodsDetail.data.goodsVideo
                    "
                  >
                    <img src="/goods/playV.png" alt="" @click="playV" />
                  </div>
                  <!-- 遮罩 start-->
                  <div class="mask" ref="maskBox" v-show="maskShow"></div>
                  <!-- 遮罩 end -->
                  <!-- 底部放大镜icon图标 start -->
                  <div
                    class="magnifier_icon flex_row_center_center"
                    v-show="!maskShow"
                  >
                    <i class="iconfont icon-sousuo"></i>
                  </div>
                  <!-- 底部放大镜icon图标 end -->
                </div>
                <!-- 右侧的放大后的图片 start -->
                <div
                  class="goods_picture_big"
                  style="border: 1px solid #eee"
                  ref="zoomBox"
                  v-show="maskShow"
                >
                  <div
                    class="default_image_big"
                    :style="{ backgroundImage: 'url(' + defaultImage + ')' }"
                    ref="pictureBig"
                  ></div>
                </div>
                <!-- 右侧的放大后的图片 end -->
              </div>
              <!-- 商品放大镜效果 end -->

              <!-- 商品图片列表 start -->
              <div
                :class="{
                  goods_picture_con: true,
                  flex_row_between_center: true,
                  skeleton_goods_picture_con: firstLoading,
                }"
                v-if="
                  goodsDetail.data.defaultProduct &&
                  goodsDetail.data.defaultProduct.goodsPics &&
                  goodsDetail.data.defaultProduct.goodsPics.length > 0
                "
              >
                <i
                  class="iconfont icon-ziyuan2 left_arrow"
                  :class="{ no_left_arrow: currentDefaultImage == 0 }"
                  @click="switchDefaultImage('left')"
                ></i>
                <div class="show_box">
                  <ul
                    class="goods_picture_list flex_row_start_center"
                    ref="goodsPictureList"
                  >
                    <li
                      v-for="(goodsImgItem, goodsImgIndex) in goodsDetail.data
                        .defaultProduct.goodsPics"
                      :key="goodsImgIndex"
                      class="goods_img"
                      :class="{
                        goods_img_active: currentDefaultImage == goodsImgIndex,
                      }"
                      @click="selectDefaultImage(goodsImgItem, goodsImgIndex)"
                      @mouseover="
                        selectDefaultImage(goodsImgItem, goodsImgIndex)
                      "
                    >
                      <div
                        class="goods_image"
                        :style="{
                          backgroundImage: 'url(' + goodsImgItem + ')',
                        }"
                      ></div>
                    </li>
                  </ul>
                </div>
                <i
                  class="iconfont icon-ziyuan11 right_arrow"
                  :class="{
                    no_left_arrow:
                      currentDefaultImage ==
                      goodsDetail.data.defaultProduct.goodsPics.length - 1,
                  }"
                  @click="switchDefaultImage('right')"
                ></i>
              </div>
              <!-- 商品图片列表 end -->
              <!-- 商品分享和收藏 start -->
              <!-- <div
                class="collection_share_btn flex_row_start_start"
                v-if="goodsDetail.data.state == 3"
              >
                <div
                  class="collection_btn flex_row_start_center cursor_pointer"
                  @click="collectGoods"
                >
                  <img
                    src="/goods/collection.png"
                    alt=""
                    v-if="goodsDetail.data.followGoods"
                  />
                  <img src="/goods/collection1.png" alt="" v-else />
                  <span>{{
                    goodsDetail.data.followGoods ? L["已收藏"] : L["收藏"]
                  }}</span>
                </div>
                <div class="share_btn">
                  <AddThis publicId="ra-5ab34ca22008ed41" />
                </div>
              </div> -->
              <!-- 商品分享和收藏 end -->
            </div>
            <!-- 商品图片列表 end -->
            <!-- 商品详细信息 start -->
            <div class="m_item_inner">
              <div class="item_info">
                <div
                  :class="{
                    detaile_name: true,
                    skeleton_detaile_name: firstLoading,
                  }"
                >
                  {{ goodsDetail.data.goodsName }}
                </div>
                <div
                  :class="{ p_ad: true, skeleton_p_ad: firstLoading }"
                  v-if="goodsDetail.data.goodsBrief"
                >
                  {{ goodsDetail.data.goodsBrief }}
                </div>
                <!-- 商品未下架即正常商品 start -->
                <div v-if="goodsDetail.data.state == 3 || firstLoading">
                  <div class="summary">
                    <div
                      class="sld_summary_item summary_goods clearfix"
                      v-if="goodsDetail.data.defaultProduct"
                    >
                      <div class="sld_summary_goods_left">
                        <div class="goods_price flex_row_start_center">
                          <!-- 在售价 -->
                          <div>
                            <span class="price_title">{{ L["价格"] }}</span>
                            <strong
                              :class="{
                                p_price: true,
                                skeleton_p_price: firstLoading,
                              }"
                            >
                              <span>
                                {{
                                  goodsDetail.data.goodsMoney == null
                                    ? "面议"
                                    : goodsDetail.data.goodsMoney
                                }}
                              </span>
                            </strong>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div v-if="
                        goodsDetail.data.goodsMinOrder != undefined &&
                        goodsDetail.data.goodsMinOrder
                        "  class="goodsMinOrder">
                    <span class="">{{ L["最低采购数量："] }}</span>
                    <strong>
                      <span>
                          {{
                            goodsDetail.data.goodsMinOrder == null
                              ? "--"
                              : goodsDetail.data.goodsMinOrder
                        }}
                      </span>
                  </strong>
                  </div>
                  <!-- 商品简介 start -->
                  <div class="summary-info">
                    <div
                            v-if="
                        goodsDetail.data.goodsSummary != undefined &&
                        goodsDetail.data.goodsSummary
                      "
                            class="summary_html"
                            :style="goodsDetail.data.goodsSummaryBg"
                    >
                      <div
                              class="summary_htmls"
                              v-html="goodsDetail.data.goodsSummary"
                      ></div>
                    </div>
                  </div>

                  <!-- 规格 start -->
                  <div
                    class="goods_spec"
                    v-if="
                      goodsDetail.data.specs &&
                      goodsDetail.data.specs.length > 0
                    "
                  >
                    <div
                      class="goods_spec_pre flex_row_start_start"
                      v-for="(specItem, specIndex) in goodsDetail.data.specs"
                      :key="specIndex"
                    >
                      <div
                        class="goods_spec_pre_title"
                        :title="specItem.specName"
                      >
                        {{ specItem.specName }}
                      </div>
                      <div class="goods_spec_pre_list flex_row_start_center">
                        <!-- checkState : 1-选中，2-可选，3-禁用 -->
                        <!-- 禁止选择 -->
                        <div
                          class="specval_pre cursor_pointer"
                          :class="{
                            specval_pre_disabled: sepcValItem.checkState == '3',
                          }"
                          v-for="(
                            sepcValItem, specValIndex
                          ) in specItem.specValueList"
                          :key="specValIndex"
                          v-show="sepcValItem.checkState == '3'"
                        >
                          <div
                            class="specval_pre_image"
                            :style="{
                              backgroundImage: 'url(' + sepcValItem.image + ')',
                            }"
                            :title="sepcValItem.specValue"
                            v-if="sepcValItem.image"
                          ></div>
                          <span class="specval_pre_text" v-else>{{
                            sepcValItem.specValue
                          }}</span>
                        </div>
                        <!-- 可选择 -->
                        <div
                          class="specval_pre cursor_pointer"
                          :class="{
                            specval_pre_active: sepcValItem.checkState == '1',
                          }"
                          v-for="(
                            sepcValItem, specValIndex
                          ) in specItem.specValueList"
                          :key="specValIndex"
                          @click="
                            selectSpecVal(
                              'choice',
                              specItem.specId,
                              sepcValItem.specValueId
                            )
                          "
                          v-show="sepcValItem.checkState != '3'"
                        >
                          <div
                            class="goods_image"
                            :style="{
                              backgroundImage: 'url(' + goodsImgItem + ')',
                            }"
                          ></div>
                          <div
                            class="specval_pre_image"
                            :style="{
                              backgroundImage: 'url(' + sepcValItem.image + ')',
                            }"
                            :title="sepcValItem.specValue"
                            v-if="sepcValItem.image"
                          ></div>
                          <span class="specval_pre_text" v-else>{{
                            sepcValItem.specValue
                          }}</span>
                          <img
                            src="/goods/check_mark.png"
                            alt=""
                            class="check_mark"
                            v-if="sepcValItem.checkState == '1'"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 规格 end -->
                </div>
                <!-- 商品未下架即正常商品 end -->
                <template v-if="!firstLoading">
                  <!-- 立即购买 加入购物车 收藏 ，分享 start-->

                  <!-- 商品已下架 start -->
                  <div
                    class="options_btn"
                    v-if="goodsDetail.data.state && goodsDetail.data.state != 3"
                  >
                    <p class="option_desc">{{L['商品已下架，欢迎挑选其他商品~']}}</p>
                    <div class="goods_off_shelves">{{ L["商品已下架"] }}</div>

                    <!-- 商品下架时的推荐商品 start -->
                    <div class="recoOffShop">
                      <div
                        class="reCon"
                        v-for="(
                          {
                            goodsImage,
                            goodsName,
                            goodsPrice,
                            defaultProductId,
                          },
                          index
                        ) in recomOffShop.data"
                        :key="index"
                      >
                        <div class="reComImg">
                          <router-link
                            :to="'/goods/detail/'+ calcProductName(goodsName) +'_'+ defaultProductId"
                            target="_blank"
                          >
                            <img :src="goodsImage" alt="" />
                          </router-link>
                        </div>
                        <router-link
                          class="recomName"
                          :to="'/goods/detail/'+ calcProductName(goodsName) +'_'+ defaultProductId"
                          target="_blank"
                        >
                          {{ goodsName }}
                        </router-link>
                        <span class="recomPrice">{{ goodsMoney }}</span>
                      </div>
                    </div>
                    <!-- 商品下架时的推荐商品 end -->
                  </div>
                  <!-- 商品已下架 end -->

                  <!-- 普通(活动)正常商品 start -->
                  <div class="options_btn flex_row_start_center" v-else>
                    <div
                      class="goods_code"
                      id="qrcodeAct"
                      v-show="isShowQr"
                    ></div>

                    <div v-if="goodsDetail.data.state === 3" class="buy_now flex_row_center_center mt-20" @click="goBuy">
                      {{ L["发送询盘"] }}
                    </div>
                    <div
                      class="collection_share_btn flex_row_start_start mt-20"
                      v-if="goodsDetail.data.state == 3"
                    >
                      <div
                        class="collection_btn flex_row_start_center cursor_pointer"
                        @click="collectGoods"
                      >
                        <img
                          src="/goods/collection.png"
                          alt=""
                          v-if="goodsDetail.data.followGoods"
                        />
                        <img src="/goods/collection1.png" alt="" v-else />
                        <span>{{
                          goodsDetail.data.followGoods ? L["已收藏"] : L["收藏"]
                        }}</span>
                      </div>
                      <!-- <div class="share_btn">
                        <AddThis publicId="ra-5ab34ca22008ed41" />
                      </div> -->
                    </div>
                  </div>
                  <!-- 普通(活动)正常商品 end -->

                  <!-- 立即购买 加入购物车 收藏 ，分享 end-->
                </template>
              </div>
            </div>
            <!-- 商品详细信息 end -->
            <!-- 相关推荐 start -->
            <div class="more_goods" v-if="goodsDetail.data.state == 3">
              <div class="more_goods_title">{{ L["看了又看"] }}</div>
              <div class="more_goods_list flex_column_center_center">
                <template v-if="firstLoading">
                  <div
                    class="more_goods_pre"
                    v-for="(recommendItem, recommendIndex) in [
                      { a: 1 },
                      { b: 2 },
                      { c: 3 },
                    ]"
                    :key="recommendIndex"

                  >
                    <router-link
                        target="_blank"
                        :to="'/goods/detail/'+ calcProductName(recommendItem.goodsName) +'_'+ recommendItem.defaultProductId"
                    >

                      <div
                        :class="{
                          more_goods_pre_img: true,
                          skeleton_more_goods_pre_img: firstLoading,
                        }"
                      ></div>
                      <p
                        :class="{
                          skeleton_more_goods_pre_goods_name: firstLoading,
                        }"
                      >
                        {{ recommendItem.goodsName }}
                      </p>
                      <p>
                        <span
                          :class="{
                            skeleton_more_goods_pre_goods_price: firstLoading,
                          }"
                        ></span>
                      </p>
                    </router-link>
                  </div>

                </template>
                <template v-else>
                  <div
                    class="more_goods_pre"
                    v-for="(
                      recommendItem, recommendIndex
                    ) in recommendeList.data"
                    :key="recommendIndex"
                    v-show="recommendIndex < 2"
                  >
                    <router-link
                        target="_blank"
                        :to="'/goods/detail/'+ calcProductName(recommendItem.goodsName) +'_'+ recommendItem.defaultProductId"
                    >
                      <div class="more_goods_pre_img flex_row_center_center">
                        <img
                            :src="recommendItem.goodsImage"
                            :title="recommendItem.goodsName"
                        />
                      </div>
                      <p>{{ recommendItem.goodsName }}</p>
                      <p>{{ recommendItem.goodsMoney }}</p>
                    </router-link>

                  </div>
                </template>
              </div>
            </div>
            <!-- 相关推荐 end -->
          </div>
          <!-- 商品相关 end -->
          <!-- 店铺，及各种信息的切换 start -->
          <div
            class="container flex_row_start_start"
            ref="container"
            id="container"
          >
            <div class="left">
              <div class="store_info" v-if="goodsDetail.data.storeInf">
                <div class="store_info_title flex_row_start_center">
                  <span
                    class="store_type"
                    v-if="goodsDetail.data.storeInf.isOwnStore == 1"
                    >{{ L["自营"] }}</span
                  >
                  <router-link
                      target="_blank"
                      :to="'/store/'+ calcProductName(goodsDetail.data.storeInf.storeName) +'_'+ goodsDetail.data.storeInf.storeId"
                  >
                  <span class="store_title" @click="goStore()">{{
                    goodsDetail.data.storeInf.storeName
                  }}</span>
                  </router-link>
                </div>
                <div class="store_des">
                  <div class="store_des_pre pre_service">
                    <span>{{ L["客服电话"] }}:</span>
                    <span>{{ goodsDetail.data.storeInf.servicePhone }}</span>
                  </div>
                  <div class="store_des_pre pre_service">
                    <span>{{ L["主营商品"] }}:</span>
                    <span>{{ goodsDetail.data.storeInf.mainBusiness }}</span>
                  </div>
                </div>
                <div class="store_btn flex_row_center_center">
                  <div class="store_btn_pre go_store_btn flex_row_center_center">
                    <!-- <img src="/goods/store.png" alt="" class="btn_pre_img" /> -->
                    <router-link
                      target="_blank"
                      :to="'/store/'+ calcProductName(goodsDetail.data.storeInf.storeName) +'_'+ goodsDetail.data.storeInf.storeId"
                    >
                      {{ L["进入店铺"] }}
                    </router-link>
                  </div>
                  <div
                    class="store_btn_pre follow_btn flex_row_center_center"
                    @click="focusStore"
                  >
                    <!-- <img
                      src="/goods/collection.png"
                      alt=""
                      v-if="goodsDetail.data.storeInf.isFollowStore"
                    />
                    <img src="/goods/no_collection.png" alt="" v-else /> -->
                    <span>{{
                      goodsDetail.data.storeInf.isFollowStore
                        ? L["取消关注"]
                        : L["关注店铺"]
                    }}</span>
                  </div>
                </div>
              </div>
              <!-- 店铺推荐及热门收藏 end -->
            </div>
            <!-- 商品详情 评价 商品服务 店铺热销  start-->
            <div class="goods_description">
              <div class="goods_description_title flex_row_between_center">
                <div class="description_title_left flex_row_start_center">
                  <span
                    class="cursor_pointer"
                    :class="{
                      description_active: goodsDesctionType == 'detail',
                    }"
                    @click="goodsDescType('detail')"
                    >{{ L["商品详情"] }}</span
                  >
                  <span
                    class="cursor_pointer"
                    v-if="
                      goodsDetail.data.goodsAnnexList &&
                      goodsDetail.data.goodsAnnexList.length > 0
                    "
                    :class="{
                      description_active: goodsDesctionType == 'evaluate',
                    }"
                    @click="goodsDescType('evaluate')"
                    >{{ L["商品说明"] }}</span
                  >
                  <span
                    class="cursor_pointer"
                    v-if="
                      goodsDetail.data.serviceLabels &&
                      goodsDetail.data.serviceLabels.length > 0
                    "
                    :class="{
                      description_active: goodsDesctionType == 'service',
                    }"
                    @click="goodsDescType('service')"
                    >{{ L["商品服务"] }}</span
                  >
                  <span
                    class="cursor_pointer"
                    :class="{
                      description_active: goodsDesctionType == 'salestore',
                    }"
                    @click="goodsDescType('salestore')"
                    >{{ L["店铺推荐"] }}</span
                  >
                </div>
              </div>
              <div class="goods_description_con">
                <!-- 商品详情,规格参数,及详情富文本 start-->
                <div class="goods_des_con" v-if="goodsDesctionType == 'detail'">
                  <div
                    v-if="
                      goodsDetail.data.brandName ||
                      (goodsDetail.data.goodsParameterList &&
                        goodsDetail.data.goodsParameterList.length > 0) ||
                      goodsDetail.data.goodsDetails
                    "
                  >
                    <div class="brand" v-if="goodsDetail.data.brandName">
                      <span>{{ L["品牌"] }}: </span>
                      <span>{{ goodsDetail.data.brandName }}</span>
                    </div>
                    <div
                      v-if="
                        goodsDetail.data.goodsParameterList &&
                        goodsDetail.data.goodsParameterList.length > 0
                      "
                    >
                      <div
                        class="goods_parameter_list"
                        :class="{ goods_paramter_more: !parameterShow }"
                      >
                        <div
                          class="goods_parameter_pre"
                          v-for="(parameterItem, paramterIndex) in goodsDetail
                            .data.goodsParameterList"
                          :key="paramterIndex"
                        >
                          <span>{{ parameterItem.parameterName }}: </span>
                          <span>{{ parameterItem.parameterValue }}</span>
                        </div>
                      </div>
                      <div
                        class="collapse_unfold flex_row_center_center cursor_pointer"
                        v-if="goodsDetail.data.goodsParameterList.length > 16"
                        @click="openParameter"
                      >
                        <span>{{
                          !parameterShow ? L["查看全部"] : L["收起全部"]
                        }}</span>
                        <i
                          class="iconfont icon-ziyuan11-copy"
                          v-if="!parameterShow"
                        ></i>
                        <i class="iconfont icon-ziyuan11-copy-copy" v-else></i>
                      </div>
                    </div>
                    <div
                      v-if="
                        goodsDetail.data.topTemplateContent != undefined &&
                        goodsDetail.data.topTemplateContent
                      "
                      class="goods_html"
                      :style="goodsDetail.data.topTemplateContentBg"
                    >
                      <div
                        class="goods_htmls"
                        v-html="goodsDetail.data.topTemplateContent"
                      ></div>
                    </div>
                    <div
                      v-if="
                        goodsDetail.data.goodsDetails != undefined &&
                        goodsDetail.data.goodsDetails
                      "
                      class="goods_html"
                      :style="goodsDetail.data.goodsDetailsBg"
                    >
                      <div
                        class="goods_htmls"
                        v-html="goodsDetail.data.goodsDetails"
                      ></div>
                    </div>
                    <div
                      v-if="
                        goodsDetail.data.bottomTemplateContent != undefined &&
                        goodsDetail.data.bottomTemplateContent
                      "
                      class="goods_html"
                      :style="goodsDetail.data.bottomTemplateContentBg"
                    >
                      <div
                        class="goods_htmls"
                        v-html="goodsDetail.data.bottomTemplateContent"
                      ></div>
                    </div>
                  </div>
                  <div v-else>
                    <SldCommonEmpty
                      :tip="L['该商品暂无详情~']"
                      totalWidth="934px"
                    />
                  </div>
                </div>
                <!-- 商品详情,规格参数,及详情富文本 end-->
                <!-- 商品评价 start -->
                <div
                  class="goods_comments"
                  v-if="goodsDesctionType == 'evaluate'"
                >
                  <!--说明书下载begin-->
                  <div
                    class="download_warp"
                    v-if="
                      goodsDetail.data.goodsAnnexList &&
                      goodsDetail.data.goodsAnnexList.length > 0
                    "
                  >
                    <span style="margin: 10px; font-size: 14px"
                      >{{ L["说明书下载"] }}:
                    </span>
                    <br />
                    <p
                      style="margin: 10px; font-size: 14px"
                      v-for="(item, index) in goodsDetail.data.goodsAnnexList"
                      :key="index"
                    >
                      <a
                        style="text-decoration: underline"
                        href="javascript:;"
                        @click="downloadAdd(item)"
                        >{{ item.annexName }}</a
                      >
                    </p>
                  </div>
                  <div v-else>
                    {{ L["暂无说明"] }}
                  </div>
                  <!--说明书下载end-->
                </div>
                <!-- 商品评价 end -->
                <!-- 商品服务 start -->
                <div
                  class="goods_server_list"
                  v-if="goodsDesctionType == 'service'"
                >
                  <div
                    v-if="
                      goodsDetail.data.serviceLabels &&
                      goodsDetail.data.serviceLabels.length > 0
                    "
                  >
                    <div
                      class="goods_server_pre"
                      v-for="(serverItem, serverIndex) in goodsDetail.data
                        .serviceLabels"
                      :key="serverIndex"
                    >
                      <div class="server_pre_top flex_row_start_center">
                        <span class="server_pre_tips"></span>
                        <span class="server_pre_name">{{
                          serverItem.labelName
                        }}</span>
                      </div>
                      <div class="server_pre_content">
                        {{ serverItem.description }}
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <SldCommonEmpty
                      :tip="L['暂无商品服务~']"
                      totalWidth="934px"
                    />
                  </div>
                </div>
                <!-- 商品服务 end -->
                <!-- 店铺推荐 start -->
                <div
                  class="store_hot_sales"
                  v-if="goodsDesctionType == 'salestore'"
                >
                  <div
                    v-if="
                      recommendedList.data && recommendedList.data.length > 0
                    "
                  >
                    <div class="store_hot_sales_list">
                      <div
                        class="goods_pre flex_column_between_start"
                        v-for="(
                          recommendItem, recommendIndex
                        ) in recommendedList.data"
                        :key="recommendIndex"
                      >
                        <router-link
                            target="_blank"
                            :to="'/goods/detail/'+ calcProductName(recommendItem.goodsName) +'_'+ recommendItem.defaultProductId"
                        >
                          <div class="flex_column_start_start">
                            <div
                                class="goods_pre_img"
                                :style="{
                              backgroundImage:
                                'url(' + recommendItem.goodsImage + ')',
                            }"
                            ></div>
                            <div class="goods_name">
                              {{ recommendItem.goodsName }}
                            </div>
                          </div>
                          <div class="goods_price">
                            <div class="selling_price">
                              {{ recommendItem.goodsMoney }}
                            </div>
                          </div>
                        </router-link>

                      </div>
                    </div>
                    <div
                      class="flex_row_end_center sld_pagination sld_page_bottom"
                      v-if="
                        recommendeData.data.pagination &&
                        recommendeData.data.pagination.total
                      "
                    >
                      <el-pagination
                        @current-change="handleCurrentChangeSales"
                        v-model:currentPage="salesCurrent"
                        :page-size="salesPageSize"
                        layout="prev, pager, next, jumper"
                        :total="recommendeData.data.pagination.total"
                        :hide-on-single-page="true"
                      >
                      </el-pagination>
                    </div>
                  </div>
                  <div
                    v-if="
                      recommendedList.data && recommendedList.data.length == 0
                    "
                    class="flex_column_center_center empty_data"
                  >
                    <SldCommonEmpty
                      :tip="L['暂无相关商品~']"
                      totalWidth="934px"
                    />
                  </div>
                </div>
                <!-- 店铺推荐 end -->
              </div>
            </div>
            <!-- 商品详情 评价 商品服务 店铺热销  end-->
          </div>
          <!-- 店铺，及各种信息的切换 end -->
        </div>
        <!-- 商品主要信息 end -->
      </div>

      <EnquiryModal
        v-if="enquiryVis"
        :itemType="'GOODS'"
        :itemId="productId"
        @closeLoingModal="closeEnquiryModal"
      />

      <div class="error-wrap" v-if="!firstLoading && goodsDetail.data.state !== 3">
        <div class="error-wrap-content">
            <div class="error-wrap-content__tip">
              <img src="/new_empty.png"/>
              <span class="text_1">{{ L['该产品已被下架或移除。'] }}</span>
              <span class="text_2">{{ L['谢谢您的关注！'] }}</span>
            </div>
            <div class="error-wrap-content__like">
              <div class="like_title">
                {{ L['看了又看'] }}
              </div>
              <div class="like_list">
                <div class="like_list_item" v-for="(recommendItem, recommendIndex) in recommendeList.data" :key="recommendIndex">
                  <router-link
                    target="_blank"
                    :to="'/goods/detail/'+ calcProductName(recommendItem.goodsName) +'_'+ recommendItem.defaultProductId"
                >
                    <div class="item-img">
                      <img
                          :src="recommendItem.goodsImage"
                          :title="recommendItem.goodsName"
                      />
                    </div>
                    <div class="item-name">{{ recommendItem.goodsName }}</div>
                  </router-link>
                </div>
              </div>
            </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import addrData from "@/assets/area.json";
import { ElMessage, ElRate, ElDialog, ElPagination } from "element-plus";
import { qrcanvas } from "qrcanvas";
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from '@/composables/common.js';
import { goodsInfo, useUserInfo } from "@/store/user.js";
import { useFiltersStore } from "@/store/filter.js";

const filtersStore = useFiltersStore();
const goodsInfox = goodsInfo();
const configInfo = useUserInfo();
// const L = lang_zn;
const L = getCurLanguage();
const firstLoading = ref(true); //是否第一次加载
const router = useRouter();
const route = useRoute();
const store = ref();
const imgVisible = ref(false);
const imgSource = ref("");
const imgIndex = ref(-1);
const vid = ref(0); //店铺id
const proxy = getCurrentInstance();
const goodsDetail = reactive({ data: {} }); //商品详情数据
const isChoice = ref("default"); //是默认选中的,还是点击选择规格之后的  default:默认  choice:选择
const productId = ref(""); //货品id
const fullDisList = reactive({ data: [] }); //满优惠促销列表
const couponList = reactive({ data: [] }); //获取店铺优惠券列表
const pictureBig = ref(null); //大图的信息
const maskBox = ref(null); //遮罩盒子的信息
const maskShow = ref(false); //遮罩是否显示
const previewBox = ref(null); // 左侧主图元素信息
const zoomBox = ref(null); //左侧主图的父元素的信息
const defaultImage = ref(""); //默认主图路径
const currentDefaultImage = ref("0"); //默认主图显示第一张
const currentSpecNum = ref(1); //商品编辑数量，默认数量为1
const recommendeList = reactive({ data: [] }); //看了又看商品
const storePopularList = reactive({ data: [] }); //店铺推荐及热门收藏
const storePopularType = ref("collection"); //店铺推荐及热门收藏,默认显示店铺推荐
const goodsDesctionType = ref("detail"); //商品详情,评价,商品服务,店铺热销,默认显示商品详情
const goodsCommentsInfo = reactive({ data: {} }); //商品评价信息
const evaluationType = ref(""); //商品评价类型,默认显示全部
const recommendedList = reactive({ data: [] }); //店铺推荐列表
const evaluationCurrent = ref(1); //评价列表默认第一页
const evaluationPageSize = ref(5); //评价列表默认一页显示5条数据
const salesCurrent = ref(1); //店铺热销列表默认一页
const salesPageSize = ref(20); //店铺热销列表默认一页显示20条数据
const recommendeData = reactive({ data: {} }); //店铺热销推荐数据
const couponModel = ref(false); //优惠券弹框是否显示
const cartListData = reactive({ data: goodsInfox.cartListData }); //获取vux的store中的购物车数据
const enquiryVis = ref(false); //登录弹框是否显示，默认不显示
const container = ref(null); // 商品详情页底部内容区
const containerTop = ref(0); //商品详情页底部内容区的top值
const containCon = ref(false); //固定内容区头部
const fullDiscountModel = ref(false); //满优惠弹框是否显示
const goodsPictureList = ref(null); //商品图片列表
const curCouponPage = ref(1); //当前为第一页优惠券
const couponPageSize = ref(6); //优惠券默认一页显示6条数据
const wxShareCode = ref(false); //微信分享二维码是否显示
const parameterShow = ref(false); //规格参数查看是否查看全部，默认为否
const score = ref(0); //好评率
const colors = ref(["#E2231A", "#E2231A", "#E2231A"]); //星星颜色
const curAddr = ref(-1);
const curAddrName = ref("");
const addrIdx = ref(0);
const otherAddrIdx = ref(0);
const othTopIdx = reactive({
  0: 0,
  1: 0,
  2: 0,
});
const otherTree = ref([
  addrData[othTopIdx["0"]],
  addrData[othTopIdx["0"]].children[othTopIdx["1"]],
]);
const othAddrDe = ref(addrData);
const addrDialogVisible = ref(false);
const logFlag = ref(configInfo.loginFlag);
// 促销活动信息
const preSellInfo = reactive({ data: {} });
const pinInfo = reactive({ data: {} });
const seckillInfo = reactive({ data: {} });
const ladderInfo = reactive({ data: {} });
const address_list = reactive({ data: [] });
const isShowQr = ref(false);
const secInt = ref("");
const time = reactive({
  day: "00",
  hours: "00",
  minutes: "00",
  seconds: "00",
});
const judgeStock = computed(() => {
  return (
    goodsDetail.data.defaultProduct.productStock == 0 ||
    (JSON.stringify(preSellInfo.data) != "{}" &&
      preSellInfo.data.presellStock == 0) ||
    (JSON.stringify(pinInfo.data) != "{}" && pinInfo.data.spellStock == 0) ||
    (JSON.stringify(seckillInfo.data) != "{}" &&
      seckillInfo.data.seckillStock == 0)
  );
});
// 促销活动信息end

const scrollHandle = async (e) => {
  if (process.client) {
    let elementScrollTop = e.srcElement.scrollingElement.scrollTop; //获取页面滚动高度
    if (
      document.getElementById("container") &&
      elementScrollTop > document.getElementById("container").offsetTop
    ) {
      containCon.value = true;
      await proxy.$nextTick();
    } else {
      containCon.value = false;
    }
  }
};

// 点击播放视频
const playV = () => {
  currentDefaultImage.value = -1;
  defaultImage.value = "";
  maskShow.value = false;
  videoEnd();
};

//获取商品详情数据
const getInitDataStatic = async (proId) => {
  let params = {
    productId: proId,
  };
  const { data: value, pending: pending } = await useFetchRaw(
    apiUrl + "v3/goods/front/goods/details",
    { params: params }
  );
  const res = value._rawValue;
  if (res.state == 200) {
    let staticData = [
      "brandId",
      "brandName",
      "categoryPath",
      "categoryIdPath",
      "goodsBrief",
      "goodsDetails",
      "goodsSummary",
      "goodsBrief",
      "goodsId",
      "goodsName",
      "goodsParameterList",
      "goodsVideo",
      "topTemplateContent",
      "bottomTemplateContent",
      "goodsAnnexList",
      "serviceLabels",
      "goodsMoney",
      "goodsMinOrder",
      "goodsParameterList",
    ];

    staticData.forEach((item) => {
      if (item == "categoryPath") {
        goodsDetail.data.categoryPath = res.data.categoryPath.split("->");
      } else if (item == "categoryIdPath") {
        goodsDetail.data.categoryIdPath = [
          res.data.categoryId1,
          res.data.categoryId2,
          res.data.categoryId3,
        ];
      } else {
        goodsDetail.data[item] = res.data[item];
      }
    });

    if (goodsDetail.data.goodsSummary) {
      goodsDetail.data.goodsSummary = quillEscapeToHtml(
              goodsDetail.data.goodsSummary
      );
      //处理背景样式
      if (
              goodsDetail.data.goodsSummary.indexOf(
                      '<p style="display:none;" data-background="'
              ) != -1
      ) {
        let bg = goodsDetail.data.goodsSummary
                .split('<p style="display:none;" data-background="')[1]
                .split('">')[0];
        goodsDetail.data.goodsSummaryBg = bg;
      }
    }
    if (goodsDetail.data.topTemplateContent) {
      goodsDetail.data.topTemplateContent = quillEscapeToHtml(
        goodsDetail.data.topTemplateContent
      );
      //处理背景样式
      if (
        goodsDetail.data.topTemplateContent.indexOf(
          '<p style="display:none;" data-background="'
        ) != -1
      ) {
        let bg = goodsDetail.data.topTemplateContent
          .split('<p style="display:none;" data-background="')[1]
          .split('">')[0];
        goodsDetail.data.topTemplateContentBg = bg;
      }
    }
    if (goodsDetail.data.goodsDetails) {
      goodsDetail.data.goodsDetails = quillEscapeToHtml(
        goodsDetail.data.goodsDetails
      );
      //处理背景样式
      if (
        goodsDetail.data.goodsDetails.indexOf(
          '<p style="display:none;" data-background="'
        ) != -1
      ) {
        let bg = goodsDetail.data.goodsDetails
          .split('<p style="display:none;" data-background="')[1]
          .split('">')[0];
        goodsDetail.data.goodsDetailsBg = bg;
      }
    }
    if (goodsDetail.data.bottomTemplateContent) {
      goodsDetail.data.bottomTemplateContent = quillEscapeToHtml(
        goodsDetail.data.bottomTemplateContent
      );
      //处理背景样式
      if (
        goodsDetail.data.bottomTemplateContent.indexOf(
          '<p style="display:none;" data-background="'
        ) != -1
      ) {
        let bg = goodsDetail.data.bottomTemplateContent
          .split('<p style="display:none;" data-background="')[1]
          .split('">')[0];
        goodsDetail.data.bottomTemplateContentBg = bg;
      }
    }
    currentDefaultImage.value = 0;
    vid.value = res.data.storeInf.storeId;
    // setTimeout(() => {
    //   sldStatEvent({ behaviorType: 'gpv', goodsId: goodsDetail.data.goodsId, storeId: vid.value });
    // }, 3000)
  } else {
    ElMessage.error(res.msg);
  }
  if (!pending._rawValue) {
    getInitDataDynamic(productId.value);
    getRecommend();
    getStorePopular();
    getEvaluation();
    addLog();
  }
};



getInitDataStatic(calcProductId(route.path));

onMounted(() => {
  setTimeout(() => {
      sldStatEvent({ behaviorType: 'gpv', goodsId: goodsDetail.data.goodsId, storeId: vid.value,pageUrl: defaultUrl + router.currentRoute.value.path, referrerPageUrl: apiUrl  });
    }, 3000)
});

productId.value = calcProductId(route.path);
if (!logFlag.value) {
  addrIdx.value = 1;
}

const getInitDataDynamic = async (proId, updateType) => {
  let params = {
    productId: proId,
  };

  const { data: value, pending: pending } = await useFetchRaw(
    apiUrl + "v3/goods/front/goods/details2",
    { params: params,
      headers:{Authorization:'Bearer ' + filtersStore.getToken}
   }
  );
  const res = value._rawValue;
  if (res.state == 200) {
    useHead({
      title: res.data.seoInfo.seoTitle || 'Goods Detail',
      meta: [
        {
          name: "description",
          content: res.data.seoInfo.seoDesc,
        },
        {
          name: "keywords",
          content: res.data.seoInfo.seoKeywords,
        },
      ],
    });
    defaultImage.value = res.data.defaultProduct.goodsPics[0];
    let dynamicData = [
      "defaultProduct",
      "deliverInfo",
      "effectSpecValueIds",
      "followGoods",
      "specs",
      "storeInf",
      "sales",
      "state",
      "shareLink",
      "shareImage",
      "goodsMinOrder",
      "isVirtualGoods",
    ];
    dynamicData.forEach((item) => {
      goodsDetail.data[item] = res.data[item];
    });

    if (goodsDetail.data.state != 3) {
      getRecom();
    }
    if (goodsDetail.data.defaultProduct.promotionType == 103) {
      getPreSell(res.data.defaultProduct.productId);
    } else if (goodsDetail.data.defaultProduct.promotionType == 102) {
      getPin();
    } else if (goodsDetail.data.defaultProduct.promotionType == 104) {
      getSeckill();
    } else if (goodsDetail.data.defaultProduct.promotionType == 105) {
      getLadder();
    } else {
      preSellInfo.data = {};
      pinInfo.data = {};
      seckillInfo.data = {};
      ladderInfo.data = {};
    }
    firstLoading.value = false;
  }
};

//视频播放结束时触发
const videoEnd = () => {
  nextTick(() => {
    proxy.refs.video.onended = () => {
      currentDefaultImage.value = 0;
      defaultImage.value = goodsDetail.data.defaultProduct.goodsPics[0];
    };
  });
};

// 促销活动信息
const getPreSell = async (productId) => {
  let param = {
    productId: productId,
    promotionId: goodsDetail.data.defaultProduct.promotionId,
  };

  const { data: value } = await useFetchRaw(
    apiUrl + "v3/promotion/front/preSell/detail",
    { params: param }
  );
  const res = value.value._rawValue;
  if (res.state == 200) {
    let now = new Date();
    let preStartDate = new Date(res.data.startTime);
    let preEndDate = new Date(res.data.endTime);
    preSellInfo.data = res.data;
    let countTime = 0;
    preSellInfo.data.endTime = formatPreTime(new Date(res.data.endTime));
    preSellInfo.data.startTime = formatPreTime(new Date(res.data.startTime));
    if (now > preStartDate && now < preEndDate) {
      preSellInfo.data.pre_run = 2; //活动进行中
      countTime = res.data.distanceEndTime;
      countDown(countTime);
    } else if (now < preStartDate) {
      preSellInfo.data.pre_run = 1; //活动未开始
      countTime =
        (new Date(res.data.startTime).getTime() - now.getTime()) / 1000;
      countDown(countTime);
    } else if (now > preEndDate) {
      preSellInfo.data.pre_run = 3; //活动已结束
    }

    genQrcode();
  } else {
    ElMessage.error(res.msg);
  }
};

const getPin = () => {
  let param = {
    productId: goodsDetail.data.defaultProduct.productId,
    promotionId: goodsDetail.data.defaultProduct.promotionId,
  };

  get("v3/promotion/front/spell/detail", param).then((res) => {
    if (res.state == 200) {
      pinInfo.data = res.data;
      let countTime = 0;
      let now = new Date();
      let startTime = new Date(res.data.startTime);
      if (now < startTime) {
        countTime = (startTime.getTime() - now.getTime()) / 1000;
        countDown(countTime);
      } else {
        countTime = res.data.distanceEndTime;
        countDown(countTime);
      }
      genQrcode();
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const getSeckill = () => {
  let param = {
    productId: goodsDetail.data.defaultProduct.productId,
    promotionId: goodsDetail.data.defaultProduct.promotionId,
  };
  get("v3/promotion/front/seckill/detail", param).then((res) => {
    if (res.state == 200) {
      seckillInfo.data = res.data;
      let now = new Date();
      let countTime = 0;
      let startTime = new Date(res.data.startTime);

      if (seckillInfo.data.state == 1 || seckillInfo.data.state == 2) {
        countTime = res.data.distanceEndTime;
        countDown(countTime);
      } else {
        countTime = startTime.getTime() - now.getTime();
      }
      genQrcode();
    }
  });
};

const countDown = (countTime) => {
  secInt.value = setInterval(() => {
    if (countTime == 0) {
      getInitDataDynamic(calcProductId(route.path));
      clearInterval(secInt.value);
    } else {
      countTime--;
      let day = parseInt(countTime / 60 / 60 / 24);
      let hours = parseInt((countTime / 60 / 60) % 24);
      let minutes = parseInt((countTime / 60) % 60);
      let seconds = parseInt(countTime % 60);
      time.day = day;
      time.hours = hours > 9 ? hours : "0" + hours;
      time.minutes = minutes > 9 ? minutes : "0" + minutes;
      time.seconds = seconds > 9 ? seconds : "0" + seconds;
    }
  }, 1000);
};

const formatPreTime = (time) => {
  let op = new Date(time);
  let year = op.getFullYear();
  let month = op.getMonth() + 1;
  let day = op.getDate();
  let hour = op.getHours();
  let minute = op.getMinutes();
  let part1 = [year, month, day]
    .map((i) => (i.toString().length < 2 ? `0${i}` : i))
    .join("-");
  let part2 = [hour, minute]
    .map((i) => (i.toString().length < 2 ? `0${i}` : i))
    .join(":");
  return part1 + " " + part2;
};

const getLadder = () => {
  let param = {
    productId: goodsDetail.data.defaultProduct.productId,
    promotionId: goodsDetail.data.defaultProduct.promotionId,
  };
  get("v3/promotion/front/ladder/group/detail", param).then((res) => {
    if (res.state == 200) {
      ladderInfo.data = res.data;
      let now = new Date();
      let countTime = 0;
      let startTime = new Date(res.data.startTime);
      if (now < startTime) {
        countTime = (startTime.getTime() - now.getTime()) / 1000;
        countDown(countTime);
        ladderInfo.data.state = 1;
      } else {
        countTime = res.data.distanceEndTime;
        countDown(countTime);
        ladderInfo.data.state = 2;
      }
      genQrcode();
    }
  });
};

const genQrcode = () => {
  if (judgeStock.value) {
    return;
  }
  proxy.$nextTick(() => {
    let canvas = qrcanvas({
      data: goodsDetail.data.shareLink, //二维码内容
      size: 125,
      colorDark: "red",
    });
    setTimeout(() => {
      document.getElementById("qrcodeAct").innerHTML = "";
      document.getElementById("qrcodeAct").appendChild(canvas);
    }, 10);
  });
};

// 促销活动信息end

const recomOffShop = reactive({ data: [] });
const getRecom = () => {
  get("v3/goods/front/goods/goodsList", {
    storeId: goodsDetail.data.categoryId1,
  }).then((res) => {
    if (res.state == 200) {
      let top = Math.floor(Math.random() * (res.data.list.length - 8)) + 8;
      let end = top - 8;
      recomOffShop.data = res.data.list
        .filter(
          (item) =>
            item.defaultProductId != goodsDetail.data.defaultProduct.productId
        )
        .slice(end, top);
    }
  });
};

//添加足迹
const addLog = () => {
  let params = {
    productId: productId.value,
  };
  post("v3/member/front/productLookLog/add", params).then((res) => {});
};



//记录下载
const downloadAdd = (item) => {
  let url = item.annexUrl;
  let name = item.annexName;

  if (filtersStore.getLoginFlag) {
    post("v3/member/front/download/add", {
      goodsId: item.goodsId,
      annexId: item.annexId,
    }).then((res) => {
    });
  }

  const link = document.createElement("a");
  fetch(url)
    .then((res) => res.blob())
    .then((blob) => {
      link.href = URL.createObjectURL(blob);
      link.download = name;
      document.body.appendChild(link);
      link.click();
      window.URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
    });
};

/**
 * 选择规格值
 * @param type:类型  值:choice,规格选择  default:默认
 * @param specId:父级规格值
 * @param specValueId:点击的当前的规格值
 */
const selectSpecVal = (type, specId, specValueId) => {
  isChoice.value = type == "choice" ? "choice" : "default";
  let curParSpec = []; //当前点击的规格的父级id的当前项
  curParSpec = goodsDetail.data.specs.filter((item) => item.specId == specId);
  let curSPec = []; //当前点击的规格的规格id的当前项
  curSPec = curParSpec[0].specValueList.filter(
    (item1) => item1.specValueId == specValueId
  );
  curSPec[0].checkState = 1;
  //被选择的规格值的id
  let choiceSpecIds = [];
  goodsDetail.data.specs.forEach((item) => {
    if (item.specId != specId) {
      item.specValueList.forEach((item1) => {
        if (item1.checkState == "1") {
          // checkState: 1-选中，2-可选，3-禁用
          choiceSpecIds.push(item1.specValueId);
        }
      });
    } else {
      choiceSpecIds.push(specValueId);
    }
  });
  let params = {
    goodsId: goodsDetail.data.goodsId,
    specValueIds: choiceSpecIds.join(","),
  };
  get("v3/goods/front/goods/productInfo", params).then((res) => {
    if (res.state == 200) {
      let result = res.data;
      goodsDetail.data.defaultProduct = result.defaultProduct;
      productId.value = result.defaultProduct.productId;
      goodsDetail.data.specs = result.specs;
      defaultImage.value = goodsDetail.data.defaultProduct.goodsPics[0];
      currentDefaultImage.value = 0;
      isShowQr.value = false;
      // getInitDataDynamic(productId.value)
    }
  });
};

//改变数量按钮样式
const disStyle = reactive({
  //目的是进入商品详情页面就让减按钮呈现禁止状态
  color: "#DDDDDD",
  backgroundColor: "#F8F8F8",
});
watch(
  () => currentSpecNum.value,
  () => {
    //监听数量对加和减的样式做出调整
    let productStock = goodsDetail.data.defaultProduct.productStock;
    if (goodsDetail.data.defaultProduct.productStock == 0) {
      productStock = 999;
    }

    if (currentSpecNum.value >= productStock) {
      proxy.refs.add.style.color = "#DDDDDD";
      proxy.refs.add.style.backgroundColor = "#F8F8F8";
    } else if (currentSpecNum.value <= 1) {
      disStyle.color = "#DDDDDD";
      disStyle.backgroundColor = "#F8F8F8";
    } else {
      disStyle.color = "";
      disStyle.backgroundColor = "";
      proxy.refs.add.style.color = "";
      proxy.refs.add.style.backgroundColor = "";
    }
  }
);

watch(currentSpecNum, () => {
  if (currentSpecNum.value > goodsDetail.data.defaultProduct.productStock) {
    currentSpecNum.value = goodsDetail.data.defaultProduct.productStock;
  }
  let reg = /\./g;
  let reg0 = /0+\d/;

  if (
    currentSpecNum.value &&
    (reg.test(currentSpecNum.value) || currentSpecNum.value <= 0)
  ) {
    currentSpecNum.value = 1;
  }
});

//发送询盘
const goBuy = () => {
  enquiryVis.value = true;
};


//关闭登录弹框
const closeEnquiryModal = () => {
  enquiryVis.value = false;
};

//获取看了又看商品(人气数)
const getRecommend = async () => {
  let params = {
    storeId: vid.value,
    sort: 5,
    pageSize: 3,
    current: 1,
  };
  const { data: value } = await useFetchRaw(
    apiUrl + "v3/goods/front/goods/goodsList",
    { params: params, key: params.sort.toString() }
  );
  const res = value._rawValue;
  if (res.state == 200) {
    let result = res.data;
    recommendeList.data = result.list;
    recommendeList.data.map(
      (item) => (item.goodsPrice = new Number(item.goodsPrice).toFixed(2))
    );
  } else {
    ElMessage.error(res.msg);
  }
};

//获取店铺推荐的商品(销量数);获取热门收藏的商品(收藏数)  type:recommend销量数  collection:收藏数
const getStorePopular = async (type) => {
  if (type == "" || !type) {
    type = "recommend";
  } else {
    storePopularType.value = type;
  }
  let params = {
    storeId: vid.value,
    sort:
      storePopularType.value == "recommend"
        ? 1
        : storePopularType.value == "collection"
        ? 6
        : "",
    pageSize: 6,
    current: 1,
  };
  const { data: value } = await useFetchRaw(
    apiUrl + "v3/goods/front/goods/goodsList",
    { params: params, key: params.sort.toString() }
  );
  const res = value._rawValue;
  if (res.state == 200) {
    let result = res.data;
    storePopularList.data = result.list;
    storePopularList.data.map(
      (item) => (item.goodsPrice = new Number(item.goodsPrice).toFixed(2))
    );
  } else {
    ElMessage.error(res.msg);
  }
};

//切换商品详情,评价,服务,热销
const goodsDescType = (type) => {
  // let elementScrollTop =
  //   window.pageYOffset ||
  //   document.documentElement.scrollTop ||
  //   document.body.scrollTop; //获取页面滚动高度
  // if (elementScrollTop > containerTop.value + 33 + 48) {
  //   window.scrollTo({
  //     top: containerTop.value,
  //     behavior: "smooth",
  //   });
  // }

  if (type == "" || !type) {
    goodsDesctionType.value = "detail";
  } else {
    goodsDesctionType.value = type;
  }
  if (type == "salestore") {
    getSalestore();
  }
};

//获取商品评价
const getEvaluation = (type) => {
  if (!type) {
    evaluationType.value = "";
  } else {
    evaluationType.value = type;
  }
  let params = {
    productId: productId.value,
    current: evaluationCurrent.value,
    pageSize: evaluationPageSize.value,
    type: evaluationType.value,
  };
  get("v3/goods/front/goods/comment", params).then((res) => {
    if (res.state == 200) {
      let result = res.data;
      goodsCommentsInfo.data = result;
      score.value = Number(goodsCommentsInfo.data.avgScore);
      goodsCommentsInfo.data &&
        goodsCommentsInfo.data.list &&
        goodsCommentsInfo.data.list.length > 0 &&
        goodsCommentsInfo.data.list.map((commentsItem) => {
          commentsItem.memberName =
            commentsItem.memberName.slice(0, 1) +
            "***" +
            commentsItem.memberName.slice(
              commentsItem.memberName.length - 1,
              commentsItem.memberName.length
            );
        });
    } else {
      ElMessage.error(res.msg);
    }
  });
};
//评价列表上一页
const handlePrevCilickChange = () => {
  if (evaluationCurrent.value == 1) {
    evaluationCurrent.value = 1;
  } else {
    evaluationCurrent.value--;
  }
  getEvaluation(evaluationType.value);
};
//评价列表下一页
const handleNextCilickChange = () => {
  if (evaluationCurrent.value >= goodsCommentsInfo.data.list.length) {
    evaluationCurrent.value = goodsCommentsInfo.data.list.length;
  } else {
    evaluationCurrent.value++;
  }
  getEvaluation(evaluationType.value);
};
//评价列表当前选择页
const handleCurrentChange = (val) => {
  evaluationCurrent.value = val;
  getEvaluation(evaluationType.value);
};
//获取热销店铺推荐
const getSalestore = () => {
  let params = {
    storeId: goodsDetail.data.storeInf.storeId,
    sort: 7,
    pageSize: salesPageSize.value,
    current: salesCurrent.value,
  };
  get("v3/goods/front/goods/goodsList", params).then((res) => {
    if (res.state == 200) {
      let result = res.data;
      recommendeData.data = result;
      recommendedList.data = result.list;
      recommendedList.data.map(
        (item) => (item.goodsPrice = new Number(item.goodsPrice).toFixed(2))
      );
    } else {
      ElMessage.error(res.msg);
    }
  });
};
//店铺热销列表上一页
const handlePrevCilickChangeSales = () => {
  if (evaluationCurrent.value == 1) {
    salesCurrent.value = 1;
  } else {
    salesCurrent.value--;
  }
  getSalestore();
};
//店铺热销列表下一页
const handleNextCilickChangeSales = () => {
  if (salesCurrent.value >= goodsCommentsInfo.data.list.length) {
    salesCurrent.value = goodsCommentsInfo.data.list.length;
  } else {
    salesCurrent.value++;
  }
  getSalestore();
};
//店铺热销列表当前选择页
const handleCurrentChangeSales = (val) => {
  salesCurrent.value = val;
  getSalestore();
};
//关注店铺及取消关注
const headercat = ref(null)
const focusStore = () => {
  if (filtersStore.getLoginFlag) {
    //已登录
    let params = {
      storeIds: goodsDetail.data.storeInf.storeId,
      isCollect: !goodsDetail.data.storeInf.isFollowStore,
    };
    post("v3/member/front/followStore/edit", params).then((res) => {
      if (res.state == 200) {
        goodsDetail.data.storeInf.isFollowStore =!goodsDetail.data.storeInf.isFollowStore;
          proxy.refs.headercat.setfollowStore(goodsDetail.data.storeInf.isFollowStore? "true" : "false")
        if (goodsDetail.data.storeInf.isFollowStore) {
            sldStatEvent({
              behaviorType: "fol",
              storeId: goodsDetail.data.storeInf.storeId,
            });
        }
      }
    });
  } else {
    //未登录提示登录
    return openLoginDialog({
      onRegister: () => {
        router.push({
          path: "/register",
        });
      },
      onForgot: () => {
        router.push({
          path: "/member/login/forget",
        });
      },
    });
  }
};
//商品收藏及取消收藏
const collectGoods = () => {
  if (filtersStore.getLoginFlag) {
    //已登录
    let params = {
      productIds: productId.value,
      isCollect: !goodsDetail.data.followGoods,
    };
    post("v3/member/front/followProduct/edit", params).then((res) => {
      if (res.state == 200) {
        goodsDetail.data.followGoods = !goodsDetail.data.followGoods;
        if (goodsDetail.data.followGoods) {
            sldStatEvent({
              behaviorType: "fav",
              goodsId: goodsDetail.data.goodsId,
              storeId: goodsDetail.data.storeInf.storeId,
            });
        }
      } else {
        ElMessage.error(res.msg);
      }
    });
  } else {
    //未登录提示登录
    return openLoginDialog({
      onRegister: () => {
        router.push({
          path: "/register",
        });
      },
      onForgot: () => {
        router.push({
          path: "/member/login/forget",
        });
      },
    });
  }
};

//点击查看全部查看全部的商品规格参数
const openParameter = () => {
  parameterShow.value = !parameterShow.value;
};

//选择商品主图
const selectDefaultImage = (goodsImgItem, goodsImgIndex) => {
  defaultImage.value = goodsImgItem;
  currentDefaultImage.value = goodsImgIndex;
};

//切换商品主图
const switchDefaultImage = (type) => {
  let defaultImagelength = goodsDetail.data.defaultProduct.goodsPics.length;
  if (type == "left") {
    currentDefaultImage.value--;
    if (currentDefaultImage.value <= 0) {
      currentDefaultImage.value = 0;
    }
    defaultImage.value =
      goodsDetail.data.defaultProduct.goodsPics[currentDefaultImage.value];
  } else {
    currentDefaultImage.value++;
    if (currentDefaultImage.value >= defaultImagelength) {
      currentDefaultImage.value = defaultImagelength - 1;
    }
    defaultImage.value =
      goodsDetail.data.defaultProduct.goodsPics[currentDefaultImage.value];
  }
  goodsPictureListsLeft();
};
//图片列表的left移动的距离
const goodsPictureListsLeft = () => {
  //获取 goods_picture_list 的元素
  let goodsPictureLists = goodsPictureList.value;
  //列表默认显示5张图片
  if (
    goodsDetail.data.defaultProduct.goodsPics.length > 5 &&
    currentDefaultImage.value >= 0
  ) {
    /* 分析找规律：
            如果有8张图片，点击右键 最大可以向左移动的距离为 8 - 5既3张图，left移动的距离为 3 * - 66px; currentDefaultImage.value从0开始的
            其中：66px为每一个元素需要每次移动的距离 为图片的宽度与图片之间的间距的和
            currentDefaultImage.value == 4；goodsPictureLists.style.left = 0；
            currentDefaultImage.value == 5；goodsPictureLists.style.left = (5-4) (1) * -66px；
            currentDefaultImage.value == 6；goodsPictureLists.style.left = (5-2) (2) * -66px；
            currentDefaultImage.value == 7；goodsPictureLists.style.left = (5-3) (2) * -66px；
             点击左键，最大可以向右移动的距离为 8 - 5 即3张
             currentDefaultImage.value == 0；goodsPictureLists.style.left = 0；
             currentDefaultImage.value == 1； goodsPictureLists.style.left = -66px；
             currentDefaultImage.value == 2; goodsPictureLists.style.left = 2 * -66px；
             currentDefaultImage.value == 3; goodsPictureLists.style.left = 3 * -66px；
          */
    if (currentDefaultImage.value > 4) {
      goodsPictureLists.style.left =
        (currentDefaultImage.value - 4) * -66 + "px";
    }
    if (
      currentDefaultImage.value <
      goodsDetail.data.defaultProduct.goodsPics.length - 4
    ) {
      goodsPictureLists.style.left = currentDefaultImage.value * -66 + "px";
    }
  }
};

//获取元素距离父元素的顶部及左边的距离
const offset = (el) => {
  if (process.client) {
    let top = el.offsetTop;
    let left = el.offsetLeft;
    if (el.offsetParent) {
      el = el.offsetParent;
      top += el.offsetTop;
      left += el.offsetLeft;
    }
    return {
      left: left,
      top: top,
    };
  }
};

if (process.client) {
  nextTick(() => {
    containerTop.value = offset(container.value).top;
    window.addEventListener("scroll", scrollHandle); //绑定页面滚动事件
    window.addEventListener("click", () => {
      addrDialogVisible.value = false;
    });
  });
}

//鼠标移动
const move = (e) => {
  if (currentDefaultImage.value == -1) {
    return;
  }

  //主图父元素的信息 宽，高
  let previewsBox = previewBox.value;
  let previewBoxWidth = previewsBox.offsetWidth;
  let previewBoxHeight = previewsBox.offsetHeight;
  //主图父元素距离顶部的距离
  let previewsBoxLeft = offset(previewsBox).left;
  let previewsBoxTop = offset(previewsBox).top;

  // 遮罩盒子的信息宽，高
  let masksBox = maskBox.value;
  let maskBoxWidth = masksBox.offsetWidth;
  let maskBoxHeight = masksBox.offsetHeight;
  //鼠标距离屏幕距离
  let moveX = e.clientX;
  let moveY = e.clientY;

  //获取左侧大图父元素的信息
  let zoomsBox = zoomBox.value;
  let zoomBoxWidth = zoomsBox.offsetWidth;
  let zoomBoxHeight = zoomsBox.offsetHeight;

  // 获取大图元素的信息宽，高
  let pictureBigBox = pictureBig.value;
  let pictureBigWidth = pictureBigBox.offsetWidth;
  let pictureBigHeight = pictureBigBox.offsetHeight;

  //获取滚动条的高度
  let scroll = document.documentElement.scrollTop || document.body.scrollTop;

  //主图距离父元素的left及top值
  let left = moveX - previewsBoxLeft - maskBoxWidth / 2;
  let top;
  if (scroll > 0) {
    top = moveY - previewsBoxTop + scroll - maskBoxHeight / 2;
  } else {
    top = moveY - previewsBoxTop - maskBoxHeight / 2;
  }

  //移动限制最大宽度，及最大高度
  let maxWidth = previewBoxWidth - maskBoxWidth;
  let maxHeight = previewBoxHeight - maskBoxHeight;

  left = left < 0 ? 0 : left > maxWidth ? maxWidth : left;
  top = top < 0 ? 0 : top > maxHeight ? maxHeight : top;

  //比列
  let parcentX = left / maxWidth;
  let parcentY = top / maxHeight;

  //遮罩层的定位值
  maskBox.value.style.left = left + "px";
  maskBox.value.style.top = top + "px";

  //大图元素的定位值
  pictureBig.value.style.left =
    parcentX * (zoomBoxWidth - pictureBigWidth) + "px";
  pictureBig.value.style.top =
    parcentY * (zoomBoxHeight - pictureBigHeight) + "px";
  pictureBig.value.style.width =
    (previewBoxWidth / maskBoxWidth) * zoomBoxWidth + "px";
  pictureBig.value.style.height =
    (previewBoxHeight / maskBoxHeight) * zoomBoxHeight + "px";
};
//鼠标移出
const out = () => {
  maskShow.value = false;
};

//鼠标移入
const enter = () => {
  if (currentDefaultImage.value == -1) {
    return;
  }
  addrDialogVisible.value = false;
  maskShow.value = true;
};



// 评论区查看图片
const showImg = (index, img) => {
  imgSource.value = img;
  imgIndex.value = index;
  imgVisible.value = true;
};

//分享
const share = (type) => {
  let title = goodsDetail.data.goodsName; //需要分享的标题,这里取商品名字
  let url = goodsDetail.data.shareLink; //分享的地址，用户点击可以进入到该商品
  let content = goodsDetail.data.goodsBrief; //自定义内容,这里取商品广告词
  let targetUrl = ""; //跳转的url地址
  if (type == "weixin") {
    wxShareCode.value = true;
    //微信
    let canvas = qrcanvas({
      data: url, //二维码内容
      size: 100,
      colorDark: "red",
    });
    let share_wx_qrcode = document.getElementById("share_wx_qrcode");
    if (
      wxShareCode.value &&
      share_wx_qrcode != null &&
      share_wx_qrcode != undefined
    ) {
      document.getElementById("share_wx_qrcode").innerHTML = "";
      document.getElementById("share_wx_qrcode").appendChild(canvas);
    }
  } else if (type == "qzone") {
    wxShareCode.value = false;
    //QQ空间
    targetUrl =
      "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=" +
      encodeURIComponent(title) +
      "&desc=" +
      encodeURIComponent(content) +
      "&summary=" +
      encodeURIComponent(content) +
      "&url=" +
      encodeURIComponent(url);
    window.open(targetUrl, "_blank");
  } else if (type == "sina") {
    wxShareCode.value = false;
    //新浪微博
    targetUrl =
      "https://service.weibo.com/share/share.php?title=" +
      encodeURIComponent(content + "「" + title + "」" + " 点这里" + url);
    window.open(targetUrl, "_blank");
  }
};

const refreshInfo = () => {
  history.go(0);
};

const updateFllow = (e) => {
  goodsDetail.data.storeInf.isFollowStore = e.state == "true" ? true : false;
};

//暴露的变量及方法
</script>

<style lang="scss">
@import "@/assets/style/base.scss";
@import "@/assets/style/theme.scss";
@import "@/assets/style/iconfont.css";
@import "@/assets/style/goodsDetail.scss";

.popular_list_empty {
  height: 95px;

  font-size: 14px;
  /*font-family: Microsoft YaHei;*/
  font-weight: 400;
  color: #666666;
}

.imageBorder {
  border: 1px solid #eee;
}

.goods_picture_big {
  border: 1px solid #eee;
}

.el-radio__inner:hover {
  border-color: $colorMain;
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: $colorMain;
  background: $colorMain;
}

.el-radio__input.is-checked + .el-radio__label {
  color: $colorMain;
}

.el-radio {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  white-space: unset;
  margin-right: unset;
}

.el-radio-button__inner,
.el-radio-group {
  /* display: block; */
  line-height: 1;
  vertical-align: middle;
}

.el-radio__label {
  font-size: 13px;
  width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  line-height: 22px;
  margin-top: -5px;
}

.evaluationes {
  color: #3b4 !important;
}

.sld_goods_detail .goods_htmls .ql-video {
  width: 525px;
  height: 315px;
}

.sld_goods_detail .goods_htmls a {
  display: inline-block;
  margin: 5px auto;
  color: #0000ff;
  text-decoration: underline;
}

.sld_goods_detail .goods_htmls table {
  border-collapse: collapse;
  padding: 0;
}
.sld_goods_detail .goods_htmls td,
.sld_goods_detail .goods_htmls th {
  border: 1px solid #ddd;
  padding: 5px 10px;
}

.sld_goods_detail .goods_htmls ol li,
.sld_goods_detail .goods_htmls ul li {
  list-style: unset;
}

.sld_goods_detail {
  .summary {
    .coupon {
      .el-dialog__header {
        padding-top: 18px;
        padding-bottom: 18px;

        .el-dialog__title {
          color: #333333;
          /*font-family: Microsoft YaHei;*/
          font-weight: bold;
        }

        .el-dialog__close {
          color: #333333;
          font-size: 20px;
        }
      }

      .el-dialog__body {
        background: #f8f8f8;
      }
    }
  }
}

  .summary-info{
  }

  .mt-20{
    margin-top: 20px;
  }

  .summary_htmls img{
    width: 100%;
  }
</style>